<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>桔下小弈</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/game_hall.css">
    <link rel="shortcut icon" href="./image/favicon.ico" type="image/x-icon">

</head>
<body>
    <div class="nav">战罢两奁分白黑 一枰何处有亏成</div>
    <!-- 整个页面的容器元素 -->
    <div class="container">
        <div class="hall-container">
            <!-- 展示用户信息 -->
            <div id="screen" class="user-info"></div>
            <!-- 匹配按钮 -->
            <div id="match-button" class="btn">开始匹配</div>
        </div>
    </div>

    <script src="./js/jquery.min.js"></script>
    <script>
        let ws_url = "ws://" + location.host +"/hall";
        let ws_hdl = null;
        let screen_div = document.getElementById("screen");
        
        // 为匹配按钮添加事件监听器
        document.getElementById("match-button").addEventListener("click", match_click);
        
        window.onbeforeunload = function(){
            if (ws_hdl) {
                ws_hdl.close();
            }
        }
        
        $.ajax({
            url : "/info" ,
            type : "GET" , 
            success : function(res)
            {
                if(res.result == false){
                    window.location.assign("./login.html")
                }
                else{
                    let user_info = `<p>欢迎，<span>${res.username}</span></p>
                        <p>积分：<span>${res.score}</span></p>
                        <p>总场次：<span>${res.total_count}</span> | 胜场：<span>${res.win_count}</span></p>`;
                    screen_div.innerHTML = user_info;
                    ws_hdl = new WebSocket(ws_url);
                    ws_hdl.onmessage = ws_onmessage;        
                }
            },
            error : function(xhr)
            {
                alert("获取用户信息失败，请重新登录");
                window.location.assign("./login.html")
            }
        })

        let button_flag = "stop";
        let button_element = document.getElementById("match-button");
        
        function match_click(){
            if(button_flag == "stop"){
                let req_json = {
                    optype:"match_start"
                }
                ws_hdl.send(JSON.stringify(req_json));
            }
            else
            {
                let req_json = {
                    optype:"match_stop"
                }
                ws_hdl.send(JSON.stringify(req_json));
            }
        }

        function ws_onmessage(evt){
            let json_resp = JSON.parse(evt.data);
            if(json_resp.result == false){
                console.log(evt.data);
                alert("操作失败，请重新登录");
                window.location.assign("/login.html");
            }
            if(json_resp["optype"] == "match_start")
            {
                console.log(evt.data);
                button_element.innerHTML = "停止匹配";
                button_element.classList.add("matching");
                button_flag = "start";
            }
            else if(json_resp["optype"] == "match_stop")
            {
                console.log(evt.data);
                button_element.innerHTML = "开始匹配";
                button_element.classList.remove("matching");
                button_flag = "stop";
            }
            else if(json_resp["optype"] == "match_success")
            {
                console.log(evt.data);
                button_element.innerHTML = "开始匹配";
                button_element.classList.remove("matching");
                window.location.assign("./game_room.html");
            }
            else if(json_resp["optype"] == "hall_ready")
            {
                console.log(evt.data);
            }
            else
            {
                console.log(evt.data);
                window.location.assign("./game_room.html");
            }
        }
    </script>
</body>
</html>